<template>
  <div class="app-container">
    <div class="filterDiv">
      <label class="label">期间</label>
      <PeriodList :start="listQuery.periodCode1" :end="listQuery.periodCode2" />
      <label class="label">仓库</label>
      <warehouseList key-type="warehouseId" :select-id="listQuery.warehouseId" @selectChange="changeVal1" />
      <label class="label">存货</label>
      <itemList :select-id="listQuery.itemId" :border="true" place-txt="选择存货" @changeVal="changeVal2" />
      <label class="label">批次号</label>
      <el-input v-model="listQuery.batchNo" size="small" placeholder="批次号" style="width:120px" />
      <el-button size="small" type="primary" round @click="getList">查询</el-button>
      <el-button-group style="float:right;margin-top:5px">
        <el-button v-permiss="['366010']" type="primary" size="small" round icon="el-icon-printer" title="打印" @click="printBook" />
        <el-button v-permiss="['366020']" type="primary" size="small" round icon="el-icon-document" title="导出" @click="exportBook" />
      </el-button-group>
    </div>
    <div class="contentDiv">
      <el-table :key="tableKey" v-loading="listLoading" :data="pageData" cell-class-name="tpCell" border fit highlight-current-row style="width: 100%;" size="small">
        <el-empty slot="empty" :image-size="120" />
        <el-table-column label="仓库" show-overflow-tooltip>
          <template slot-scope="{row}">
            <span style="padding-left:10px" v-html="row.warehouseName" />
          </template>
        </el-table-column>
        <el-table-column label="业务类型">
          <template slot-scope="{row}">
            <span style="padding-left:10px" v-html="row.bizTypeName" />
          </template>
        </el-table-column>
        <el-table-column label="单据号">
          <template slot-scope="{row}">
            <span style="padding-left:10px" v-html="row.billNo" />
          </template>
        </el-table-column>
        <el-table-column label="往来单位">
          <template slot-scope="{row}">
            <span style="padding-left:10px" v-html="row.custName" />
          </template>
        </el-table-column>
        <el-table-column label="批次号">
          <template slot-scope="{row}">
            <span style="padding-left:10px" v-html="row.batchNo" />
          </template>
        </el-table-column>
        <el-table-column label="入库">
          <el-table-column label="数量">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.periodNetQtyDr" />
            </template>
          </el-table-column>
          <el-table-column label="单价">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.drPrice" />
            </template>
          </el-table-column>
          <el-table-column label="金额">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.periodNetDr" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="出库">
          <el-table-column label="数量">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.periodNetQtyCr" />
            </template>
          </el-table-column>
          <el-table-column label="单价">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.crPrice" />
            </template>
          </el-table-column>
          <el-table-column label="金额">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.periodNetCr" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="结存">
          <el-table-column label="数量">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.balanceQtyDr" />
            </template>
          </el-table-column>
          <el-table-column label="平均价">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.wmap" />
            </template>
          </el-table-column>
          <el-table-column label="金额">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.balanceDr" />
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <pagination v-show="total>20" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.limit" @pagination="getDataByPage" />
    </div>
  </div>
</template>
<script>
import { getItemSubsidiary, printItemSubsidiary, exportItemSubsidiary } from '@/api/accbook'
import { getCoas } from '@/api/voucher'
import PeriodList from '@/components/voucher/periodList'
import { getNowMonth } from '@/utils/index'
import warehouseList from '@/components/selects/warehouseList'
import itemList from '@/components/selects/itemList'
export default {
  name: 'Subsidiarynum',
  components: { PeriodList, warehouseList, itemList },
  filters: {
    zeroNull: function(num) {
      return num || ''
    },
    Fixed: function(num) {
      if (!num) {
        return ''
      }
      return parseFloat(num).toFixed(2)
    }
  },
  data() {
    return {
      tableKey: 0,
      tableData: [],
      pageData: [],
      total: 0,
      listLoading: true,
      listQuery: {
        periodCode1: this.$route.query.t1 || getNowMonth(),
        periodCode2: this.$route.query.t2 || getNowMonth(),
        warehouseId: '',
        itemId: '',
        batchNo: ''
      },
      coaArr: []
    }
  },
  created() {
    this.$store.dispatch('basedata/getitemlist')
    var obj = { includeRoot: 0 }
    getCoas(obj).then((res) => {
      this.coaArr = res.data.data || []
      this.getList()
      if (this.$route.query.coa) {
        this.listQuery.coaCode1 = this.$route.query.coa
      } else {
        this.listQuery.coaCode1 = this.coaArr[0].coaCode
      }
    })
  },
  activated() {
    this.listQuery.periodCode1 = this.$route.query.t1 || getNowMonth()
    this.listQuery.periodCode2 = this.$route.query.t2 || getNowMonth()
    this.listQuery.coaCode1 = this.$route.query.coa || ''
    if (this.coaArr.length > 0) {
      this.getList()
    }
  },
  methods: {
    changeVal1(obj) {
      this.$set(this.listQuery, 'warehouseId', obj['warehouseId'])
    },
    changeVal2(obj) {
      this.$set(this.listQuery, 'itemId', obj['itemId'])
    },
    toVoucher(row) {
      const arr = this.tableData.filter(it => it && it.jeHeaderId)
      const ddd = arr.map(it => it.jeHeaderId)
      this.$router.push('/voucher/detail?id=' + row.jeHeaderId + '&arr=' + ddd.join(','))
    },
    changeVal(obj) {
      for (const key in obj) {
        this.listQuery[key] = obj[key]
      }
    },
    getDataByPage() {
      var pageIndex = this.listQuery.pageIndex
      var arr = []
      var min = pageIndex * 20 - 20
      var max = pageIndex * 20 <= this.total ? pageIndex * 20 : this.total
      for (var i = min; i < max; i++) {
        arr.push(this.tableData[i])
      }
      this.pageData = arr
    },
    getList() {
      this.listLoading = true
      getItemSubsidiary(this.listQuery).then((res) => {
        this.listLoading = false
        this.tableData = res.data.data
        this.total = res.data.data.length
        this.getDataByPage()
      }).catch(() => {
        this.listLoading = false
      })
    },
    printBook() {
      exportItemSubsidiary(this.listQuery).then((res) => {
        window.open('http://' + window.location.host + res.data.data)
      }).catch(() => {
        this.listLoading = false
      })
    },
    exportBook() {
      printItemSubsidiary(this.listQuery)
    }
  }
}
</script>
